<template>
  <div class="interlinkage bgImg">
    <div class="body">
      <div class="wenzi ">
        <h1>友人帐</h1>
        <i class="iconfont icon-xian-xuxian"></i>
        <span>Link Exchange</span>
      </div>

      <div class="bodyBg">
        <div class="body-content">
          <!-- 声明 -->
          <div class="body-child1">
            <h3 class="byn-h3">欢迎交换友链(ˊᗜˋ)</h3>
            <ol class="byn-ol">
              <h4>请留言告诉我你的：</h4>
              <li>名字</li>
              <li>一句话介绍（熟人我会亲自帮写的）</li>
              <li>主页地址</li>
              <li>头像（HTTPS*）</li>
            </ol>
            <ul class="byn-ul">
              <h4>For Example：</h4>
              <li>★ 网站名称：可楠の小窝</li>
              <li>★ 网站地址：https://me.ursb.me</li>
              <li>★ 头像地址：https://airing.ursb.me/image/airing-face.png</li>
            </ul>
            <!-- <p># 商业转载请联系作者获得授权，非商业转载请注明出处。 # For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source. # 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) # 作者(Author)：Mashiro # 链接(URL)：https://2heng.xin/friends/ # 来源(Source)：樱花庄的白猫</p> -->
            <p class="byn-declare">※ 为保证友链质量，今后新申请的友链将经过筛选，请在收到我的回复邮件后再于贵站添加本站链接。原则上过去已添加友链不会轻易删除，如遇死链、改变网站用途（友链主要针对的是同类的博客），下次清理时未整改的将移除；如遇盗版、破解、网页植入挖矿脚本、极低质量内容、单方面移除本站链接，将直接移除，恕不另行通知。</p>
          </div>
          <!-- 友情链接 -->
          <div>
            <div class="body-title">
              <h3 class="bt-h4">友情链接</h3>
              <i class="iconfont icon-xian-xuxian"></i>
              <span>Links {{links.length}}</span>
            </div>
            <div class="body-lkLinks">
              <div v-for="(lkItem,lkIndex) in links" :key="lkIndex" :class="setClass(lkIndex)"  class="bl-link">
                <i class="iconfont" :class="setIconClass(lkIndex)"></i>
                <a :href="lkItem.link" target="_blank" :title="lkItem.Introduction">{{lkItem.linkName}}</a>
              </div>
            </div>
          </div>
          <!-- 留言 -->
          <div>
            <h3>留言</h3>
            <message topicType="友链" :typeId="0"></message>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import message from '../comments/message.vue'
export default {
  components:{
    message
  },
  data(){
    return {
      links:[],
    }
  },
  mounted(){
    this.getLinks();
  },
  methods:{
    async getLinks(){
      const {data:res} = await this.$http.get("selLinks");
      // console.log(res);
      if(res.status != 200){
        this.$message.error('获取数据失败');
      }else{
        this.links = res.message;
        console.log(this.links);
      }
    },
    setClass(index){
      return index%3==0?'frcont':'flcont';
    },
    setIconClass(index){
      return index%2==0?'icon-faxian1':'icon-lizi';
    },
    tolk(){

    },
  }
}
</script>
<style scoped>
@import url("./css/interlinkage.css");
</style>
